<template>
    <div class="search-result-list">
        <div class="screen">
            <div class="zh">综合</div>
            <div class="xl">销量</div>
            <div class="jg">价格<i class="icon-font icon-less">&#xe6a5;</i><i class="icon-font icon-more">&#xe6a6;</i></div>
            <div v-bind:class="[{red:chosed},{filter:filter}]" @click="chose">
                筛选
                <i class="icon-font icon-less" v-if="chosed">&#xe6a5;</i>
                <i class="icon-font icon-less" v-else >&#xe6a6;</i>
            </div>
        </div>
        <!--筛选下拉框-->
        <transition name="showlist">
            <div class="menu" v-show="chosed">
                <div class="white">
                    <div class="category">
                        <!--服务-->
                        <div>
                            <div class="t">服务</div>
                            <div class="tags">
                                <div class="tag">货到付款</div>
                                <div class="tag">微信</div>
                                <div class="tag">信用卡</div>
                                <div class="tag">支付宝</div>
                            </div>
                        </div>
                        <!--价格区间-->
                        <div>
                            <div class="t">价格区间</div>
                            <div class="tags">
                                <div class="tag"><i>￥</i>1-99</div>
                                <div class="tag"><i>￥</i>100-199</div>
                                <div class="tag"><i>￥</i>200-499</div>
                                <div class="tag"><i>￥</i>500以上</div>
                            </div>
                        </div>
                        <!--其它-->
                        <div>
                            <div class="t">其它</div>
                            <div class="tags">
                                <div class="tag">kk</div>
                                <div class="tag">hhh</div>
                                <div class="tag">qq</div>
                            </div>
                        </div>
                        <!--按钮：取消、完成-->
                        <div class="twoBtn">
                            <div class="left cancel" @click="cancel">取消</div>
                            <div class="right confirm" @click="confirm">完成</div>
                        </div>
                    </div>
                </div>
            </div> 
        </transition>       
        <Scroll :data="tiplists" class="product">
            <product-list  @select="selectItem"  ref="product-list" :data="tiplists"></product-list> 
            <div class="loading-container" v-show="!tiplists.length">
                <loading></loading>
            </div>              
        </Scroll>
       <router-view></router-view>   
    </div>
</template>
<script>
  import Scroll from 'base/scroll/scroll'
  import Loading from 'base/loading/loading'  
  import ProductList from 'base/product-list/product-list' 
  import {getTiplists} from 'api/recommend'
  import {ERR_OK} from 'api/config'
  import {mapMutations} from 'vuex'
export default{
    data() {
      return {
        chosed:false,
        filter:true,        
        tiplists:[]

      }
    },    
    computed:{

    },
    created(){
      this._getTiplists()        
    },
    methods:{
      chose(){
          this.chosed=!this.chosed;
      },
      cancel(){
          this.chosed=!this.chosed;
      },
      confirm(){
          this.chosed=!this.chosed;
      },   
      selectItem(item) {
        this.$router.push({
          path: `/search/search-result/${item.id}`
        })
        this.setDetail(item)
      }, 
      _getTiplists() {
        getTiplists().then((res) => {
          if (res.code === ERR_OK) {
            this.tiplists = res.data.list
          }
        })
      },
      ...mapMutations({
        setDetail: 'SET_DETAIL'
      })                    
    },
    components: {
      Scroll,
      Loading,
      ProductList
    }
  }	
</script>
<style scoped lang='scss' type="text/css">
  @import "~common/scss/variable.scss";
  @import "~common/scss/mixin.scss";
.search-result-list{
    position: fixed;
    z-index: 5;
    top: 65px;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
} 
.product{
    height:100%;
    overflow:hidden;
}
.screen{
    background:$color-highlight-background ;
    position:relative;
    height:35px;
    line-height:35px;
    width:91%;
    margin:0 auto;
    color:$color-text-d;
    font-size:$font-size-medium;
    border-bottom:1px solid #f1f2f4;
}
.screen>div{
    position:absolute;
    top:0;
    @include extend-click;
}
.zh{
    left:0;
}
.xl{
    left:70px;
}
.jg{
    left:140px;
    padding-right: 16px;
}
.jg>i{
    position:absolute;
    right:0;
    font-size: 16px;
}
.jg>.icon-less{
    top:5px;
}
.jg>.icon-more{
    bottom:5px;
}
.filter{
    right:0;
    padding-right: 16px;
}
.filter>i{
            position:absolute;
            right:0;
            top: 12px;
            font-size: 16px;
        }  
.red{
    color:#dc3a2d;
    .icon-less{
        color:#dc3a2d;
    }
}
/*筛选下拉框*/
.t{
    font-size:$font-size-small;
    color:$color-text-ll;
}
.tags{
    overflow:hidden;
}
.tag{
    float:left;
    margin-right:15px;
    margin-top:12.5px;
    padding:3px 8px;
    border:1px solid #999;
    font-size:13px;
    border-radius:4px;
}
.menu{
    position:absolute;
    top: 35px;
    z-index:6;
    width:100%;
    background:$color-highlight-background ;
}
.white{
    background-color:$color-dialog-background;
}

.category{
    width:91%;
    margin:0 auto;
    border-bottom:1px solid #f1f2f4;
    overflow:hidden;
}
.category>div{
    padding-top:14px;
    padding-bottom:17px;
    border-bottom:1px solid #f1f2f4;
}
.category>div.twoBtn{
    border-bottom:none;
    overflow:hidden;
}
.twoBtn>div{
    border:1px solid #999;
}
.tag>i{
    font-style:normal;
    font-size:10px;
}
.twoBtn>div{
    width:40%;
    text-align:center;
    color:$color-text-d;
    font-size:$font-size-medium;
    height:30px;
    line-height:30px;
    border-radius:4px;
}
.showlist-enter-active, .showlist-leave-active {
	transition: all .3s;
	transform: translateY(0);
}
.showlist-enter, .showlist-leave-active {
	opacity: 0;
	transform: translateY(-100%);
}
.loading-container{
    position: absolute;
    width: 100%;
    top: 65%;
    transform: translateY(-50%);
} 
</style>